<script setup>
import { ref,onMounted,watch  } from 'vue'
import { queryWarehouseAreaLocal,addWarehouseAreaLocal,queryWarehouseAreaLocalById,updateWarehouseAreaLocal,deleteWarehouseAreaLocal } from '../../api/warehousearealocal'
import { queryWarehouseAreaAll } from '../../api/warehousearea'
import { queryWarehouseAll } from '../../api/warehouse'
import { ElMessage } from 'element-plus'

//库区数据集合，有id，name和category两个属性
const warehouseAreaList = ref([])
const getWarehouseAreaAll = async () =>{ 
  const result = await queryWarehouseAreaAll()
  warehouseAreaList.value = result.data
}
//仓库的数据集合，有id和name两个属性
const warehouseList = ref([])
const getWarehouseAll =async () =>{
  const result = await queryWarehouseAll()
  warehouseList.value = result.data
}

//定义表当数据
const warehouseAreaLocalDate = ref({warehouseName:'',warehouseAreaName:''})
//定义表格数据
const warehouseAreaLocalList = ref([])
//条件分页查询
const query= async () =>{
  const result = await queryWarehouseAreaLocal(page.value,pageSize.value,warehouseAreaLocalDate.value.warehouseName,warehouseAreaLocalDate.value.warehouseAreaName) 
  warehouseAreaLocalList.value = result.data.rows
  total.value = result.data.total
}
//清空的点击事件
const clear = () =>{
  warehouseAreaLocalDate.value = {warehouseName:'',warehouseAreaName:''}
  query()
}

//定义弹出框数据
const title = ref(null)
const dialogShow = ref(false)
const dialogData = ref({warehouseId:'',warehouseAreaId:'',category:'',localCode:'',localLength:'',
  localWidth:'',localHeight:'',localVolume:'',localBearingCapacity:'',tunnelNumber:'',shelfNumber:'',
  layerNumber:'',status:''})


//定义分页的变量
const page = ref(1)
const pageSize = ref(10)
const total = ref(0)
//定义分页的点击事件
const handleSizeChange = (val) => {
  page.value = 1
  query()
}
const handleCurrentChange = (val) => {
  query()
}
onMounted(()=>{
  getWarehouseAreaAll()
  getWarehouseAll()
  query()
})

// 监听仓库区域ID变化，自动设置库区类型
watch(() => dialogData.value.warehouseAreaId, (newVal) => {
  if (newVal) {
    // 根据选中的仓库区域ID查找对应的库区类型
    const selectedArea = warehouseAreaList.value.find(item => item.id === newVal);
    if (selectedArea) {
      dialogData.value.category = selectedArea.category;
    }
  } else {
    // 如果没有选择仓库区域，清空库区类型
    dialogData.value.category = '';
  }
});
//添加的点击事件
const saveWarehouseAreaLocal = () =>{ 
  title.value = '添加库位'
  dialogShow.value = true
  // 清空表单数据
  dialogData.value = {warehouseId:'',warehouseAreaId:'',category:'',localCode:'',localLength:'',
  localWidth:'',localHeight:'',localVolume:'',localBearingCapacity:'',tunnelNumber:'',shelfNumber:'',
  layerNumber:'',status:''}
}
//回显数据
const edit = async (id)=>{ 
  dialogShow.value = true
  title.value = '修改库位'
  const result = await queryWarehouseAreaLocalById(id)
  dialogData.value = result.data
  // 手动设置库区类型
  if (dialogData.value.warehouseAreaId) {
    const selectedArea = warehouseAreaList.value.find(item => item.id === dialogData.value.warehouseAreaId);
    if (selectedArea) {
      dialogData.value.category = selectedArea.category;
    }
  }
}
//保存库位的点击事件
const saveWarehouseAreaLocalInfo = async () => { 
  let result = null
  if(dialogData.value.id){
    //修改仓库信息
    result = await updateWarehouseAreaLocal(dialogData.value)
  }else{
    //添加仓库信息
    result = await addWarehouseAreaLocal(dialogData.value)
  }
  if(result.code){
    ElMessage.success('操作成功！')
    dialogShow.value = false
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}

//删除
const deleteById = async (id)=>{ 
  const result = await deleteWarehouseAreaLocal(id)
  if(result.code){
    ElMessage.success('操作成功！')
    query()
  }else{
    ElMessage.error('操作失败！请重新操作')
  }
}
</script>
<template>
<div><h4>库位管理</h4></div>
<div>
  <el-form :inline="true" :model="warehouseAreaLocalDate" class="demo-form-inline">
    <el-form-item>
      <el-button type="primary" @click="saveWarehouseAreaLocal"><el-icon><Plus /></el-icon></el-button>
    </el-form-item>
    <el-form-item>
      <el-input v-model="warehouseAreaLocalDate.warehouseName" placeholder="请输入仓库名称" />
    </el-form-item>
    <el-form-item>
      <el-input v-model="warehouseAreaLocalDate.warehouseAreaName" placeholder="请输入库区名称" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="query">查询</el-button>
      <el-button type="default" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
</div>

<!-- table表格 -->
<div>
  <el-table :data="warehouseAreaLocalList" border style="width: 100%" >
    <el-table-column fixed type="index" label="序号" align="center"  width="100"/>
    <el-table-column prop="warehouseName" label="仓库名称" align="center"  width="200"/>
    <el-table-column prop="warehouseAreaName" label="库区名称" align="center" width="150"/>
    <el-table-column prop="category" label="库区类型" align="center" width="150"/>
    <el-table-column prop="localCode" label="库位编号" align="center" width="150"/>
    <el-table-column prop="localLength" label="库位长(m)" align="center" width="150"/>
    <el-table-column prop="localWidth" label="库位宽(m)" align="center" width="150"/>
    <el-table-column prop="localHeight" label="库位高(m)" align="center" width="150"/>
    <el-table-column prop="localVolume" label="库位容积(m3)" align="center" width="150"/>
    <el-table-column prop="localBearingCapacity" label="库位承重(kg)" align="center" width="150"/>
    <el-table-column prop="tunnelNumber" label="巷道号" align="center" width="150"/>
    <el-table-column prop="shelfNumber" label="货架号" align="center" width="150"/>
    <el-table-column prop="layerNumber" label="层号" align="center" width="150"/>
    <el-table-column label="是否有效" align="center" width="150">
      <template #default="scope">
        <el-tag :type="scope.row.status==1?'success':'danger'">{{ scope.row.status == 1 ? '有效' : '无效' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" align="center" width="150">
      <template #default="scope">
        <el-button size="small" @click="edit(scope.row.id)"><el-icon><EditPen /></el-icon></el-button>
        <el-button size="small" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon></el-button>
      </template>
    </el-table-column>
  </el-table>
</div>

<!-- 分页 -->
<div>
  <el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :page-sizes="[5, 10, 15, 20]"
  layout="total, sizes, prev, pager, next, jumper"
  :total="total"
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"/>
</div>


<!-- 弹出框 -->
<div>
  <el-dialog v-model="dialogShow" :title="title" width="500" align-center>
    <el-form :model="dialogData">
      <el-form-item :label-width="formLabelWidth">
        <el-select v-model="dialogData.warehouseId" placeholder="请选择仓库">
          <el-option v-for="item in warehouseList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-select v-model="dialogData.warehouseAreaId" placeholder="请选择库区">
          <el-option v-for="item in warehouseAreaList" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item :label-width="formLabelWidth" disabled>
        <el-input v-model="dialogData.category" readonly placeholder="库区类型" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.localCode" placeholder="库位编号" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.localLength" placeholder="库位长度" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.localWidth" placeholder="库位宽度" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.localHeight" placeholder="库位高度" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.localVolume" placeholder="库位容积" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.localBearingCapacity" placeholder="库位承重" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.tunnelNumber" placeholder="巷道号" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.shelfNumber" placeholder="货架号" />
      </el-form-item>
      <el-form-item :label-width="formLabelWidth">
        <el-input v-model="dialogData.layerNumber" placeholder="层号" />
      </el-form-item>
      <el-form-item label="是否有效" prop="status">
        <el-switch v-model="dialogData.status" :active-value="1" :inactive-value="2" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="dialogShow = false" type="default">取消</el-button>
      <el-button type="primary" @click="saveWarehouseAreaLocalInfo">确定</el-button>
    </template>
  </el-dialog>
</div>
</template>
<style scoped>
</style>